<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue事件处理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<!-- 
		事件的基本使用:
		1.使用v-on:xxx 或@xxx绑定事件，其中xxx是事件名;
		2.事件的回调需要配置在methods对象中，最终会在vm上;
		3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;
		4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
		5.@click="demo"和 @click="demo($event)"效果一致，但后者可以传参;
		  $event是点击事件中的参数,name是data中定义的属性。
		  <h1 @click="arrowFun(name,$event)">箭头函数</h1>
	 -->
	<body>
		<!--准备好一个容器-->
		<div id="root">
			<h1>欢迎来到{{name}}学习</h1>
			<button v-on:click="showTips1">点我提示信息1</button>
			<button v-on:click="showTips2">点我提示信息2</button>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
		new Vue({
			el: '#root',
			data: {
				name: '尚硅谷'
			},
			methods: {
				//showTips1:(event)=>{ //箭头函数该this是window
				showTips1(event) {
					//event.target获取点击所在的标签
					//console.log(event.target.innerText)//innerText获取标签文本
					console.log(this)
				},
				showTips2() {

				}
			}
		})
	</script>
</html>